<template>
  <Title>读取图片配色</Title>
  <ShowBox>
    <!-- 图片选择 -->
    <el-upload
      action="http://localhost:8080/upload"
      v-model:file-list="fileList"
      :auto-upload="false"
      class="upload-demo"
      accept=".jpg,.jpeg,.png"
      :on-change="handleImageChange"
    >
      <el-button type="primary">选择图片</el-button>
      <template #tip>
        <div class="el-upload__tip">请选择一张图片（jpg/png 格式）</div>
      </template>
    </el-upload>
    <div v-if="selectedImage" class="preview">
      <p>已选择图片：</p>
      <img :src="selectedImage" alt="预览图片" class="preview-image" />
    </div>

    <!-- 操作按钮 -->
    <div class="button-group">
      <el-button type="success" @click="processImage(1)">MaxPooling = 1</el-button>
      <el-button type="info" @click="processImage(2)">AvgPooling = 2</el-button>
    </div>

    <!-- 结果展示 -->
    <div v-if="result" class="result">
      <p>生成的配色图片：</p>
      <img :src="result.imagePath" alt="配色图片" class="result-image" />

      <p>RGB 值：</p>
      <el-table :data="csvData" style="width: 100%">
        <el-table-column prop="R" label="R" width="100"></el-table-column>
        <el-table-column prop="G" label="G" width="100"></el-table-column>
        <el-table-column prop="B" label="B" width="100"></el-table-column>
      </el-table>
    </div>
  </ShowBox>
</template>

<script setup>
import ShowBox from '@/components/ShowBox.vue'
import Title from '@/components/Title.vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 已选择的图片文件
const fileList = ref([])
// 图片路径（用于预览）
const selectedImage = ref(null)
// 后端返回的结果
const result = ref(null)
// CSV 数据
const csvData = ref([])

// 处理图片选择
const handleImageChange = (file) => {
  selectedImage.value = URL.createObjectURL(file.raw)
}

// 调用后端处理图片
const processImage = async (mode) => {
  if (!selectedImage.value) {
    ElMessage.error('请先选择图片！')
    return
  }
  try {
    const response = await axios.post('http://localhost:8080/process', {
      imagePath: selectedImage.value,
      mode,
    })
    if (response.data.success) {
      result.value = {
        imagePath: response.data.imagePath,
        csvPath: response.data.csvPath,
      }
      await loadCsvData(response.data.csvPath)
      ElMessage.success('图片处理成功！')
    } else {
      ElMessage.error('图片处理失败，请检查后端逻辑！')
    }
  } catch (error) {
    console.error(error)
    ElMessage.error('请求失败，请检查后端服务！')
  }
}

// 加载 CSV 数据
const loadCsvData = async (csvPath) => {
  try {
    const response = await axios.get(csvPath)
    const rows = response.data.split('\n').slice(1) // 去掉表头
    csvData.value = rows
      .filter((row) => row.trim() !== '')
      .map((row) => {
        const [R, G, B] = row.split(',').map(Number)
        return { R, G, B }
      })
  } catch (error) {
    console.error(error)
    ElMessage.error('加载 CSV 数据失败！')
  }
}
</script>

<style scoped>
.preview {
  margin-top: 10px;
}
.preview-image {
  max-width: 300px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-top: 10px;
}
.button-group {
  margin: 20px 0;
}
.result {
  margin-top: 20px;
}
.result-image {
  max-width: 300px;
  margin-top: 10px;
}
</style>